.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dataScreen-container {
  width: 100%;
  height: 100%;
  background: #001237;
  color: #ffffff;
  font-family: PingFang HK, PingFang HK;
  .dataScreen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    transform-origin: left top;
    width: 100%;
    height: 100%;
    .dataScreen-header {
      display: flex;
      height: 131px;
      width: 100%;
      padding: 0 36px;
      .header-lf {
        display: flex;
        align-items: center;
        width: 623px;
        height: 113px;
        background: url('../images/header-bg-l.png') no-repeat;
        background-size: 100% 100%;
        .building-name {
          font-weight: 500;
          font-size: 28px;
          color: #E2E7F9;
          position: absolute;
        }
        :deep{
          .build-select {
            opacity: 0;
            .el-select .el-input.is-focus .el-input__wrapper {
              box-shadow: none !important;
            }
            .el-input__inner::placeholder {
              color: #fff;
              text-align:center;
          }
            .el-input__wrapper {
              background-color: transparent;
              box-shadow: none;
              .el-input__inner {
                font-family: PingFang HK, PingFang HK;
                font-weight: 500;
                font-size: 28px;
                color: #E2E7F9 !important;
              }
              .el-input__suffix {
                display: none;
              }
              &.is-focus {
                box-shadow: none !important;
              }
            }
          }
        }
      }
      .header-ct {
        font-weight: 600;
        font-size: 40px;
        text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;
        width: 670px;
        height: 131px;
        background: url('../images/header-bg1.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .header-ct-title {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-weight: 600;
          font-size: 44px;
        }
      }
      .header-ri {
        font-size: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        width: 623px;
        height: 113px;
        background: url('../images/header-bg-r.png') no-repeat;
        background-size: 100% 100%;
        .header-time {
          margin-right: 10px;
        }
        .full-icon {
          cursor: pointer;
        }
      }
    }
    .dataScreen-main {
      display: flex;
      justify-content: space-between;
      flex: 1;
      margin: 20px;
      .main-left {
        width: 1417px;
        height: 892px;
        background: url('../images/main-l.png') no-repeat;
        background-size: 100% 100%;
        padding: 24px;
        .title {
          width: 390px;
          height: 40px;
          background: url('../images/main-l-title.png') no-repeat;
          background-size: 100% 100%;
          padding-left: 48px;
          font-weight: 600;
          font-size: 24px;
          color: #fdffff;
          margin-bottom: 24px;
        }

        .statistics-box {
          font-family: PingFang HK, PingFang HK;
          width: 1368px;
          height: 122px;
          margin-bottom: 20px;
          background: url('../images/top-bg.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-around;
          .box-item {
            display: flex;
            align-items: center;
            justify-content: center;
            .item-img {
              margin-top: 35px;
            }
            .item-right {
              margin-left: 10px;
              .num {
                font-weight: 400;
                font-size: 42px;
              }
            }
          }
        }
        .floor-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          .floor-box-left {
            display: flex;
            align-items: center;
            width: 755px;
            height: 58px;
            background: url('../images/floor-bg.png') no-repeat;
            background-size: 100% 100%;
            font-weight: 500;
            font-size: 24px;
            color: rgba(226, 231, 249, 0.8);
            padding-left: 20px;
            .box-left-item {
              margin-right: 80px;
              cursor: pointer;
              &.active {
                padding-bottom: 5px;
                border-bottom: 4px solid #00dee3;
              }
            }
          }
          .floor-box-right {
            display: flex;
            height: 58px;
            margin-top: 10px;
            .box-left-right {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 30px;
              cursor: pointer;
              width: 68px;
              height: 30px;
              border-radius: 1px 1px 1px 1px;
              border: 2px solid rgba(47, 166, 163, 0.4);
            }
          }
        }
        .dormitory-box {
          display: flex;
          flex-wrap: wrap;
          height: 450px;
          margin-left: 40px;
          position: relative;
          &.no-data {
            justify-content: center;
          }
          .dormitory-item {
            width: 245px;
            height: 198px;
            background: url('../images/dormitory-bg.png') no-repeat;
            background-size: 100% 100%;
            margin: 10px 6px;
            .header {
              width: 145px;
              height: 40px;
              background: url('../images/dormitory-header-bg.png') no-repeat;
              background-size: 100% 100%;
              margin: 0 auto;
              display: flex;
              align-items: center;
              justify-content: center;
              .roomName {
                font-size: 24px;
              }
              .count {
                font-size: 15px;
              }
            }
            .main {
              padding: 10px 20px;
              display: flex;
              flex-wrap: wrap;
              height: 160px;
              overflow: auto;
              .name {
                margin: 5px;
                width: 88px;
                height: 32px;
                background: #37c699;
                border-radius: 4px 4px 4px 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                &.status-1 {
                  background: #ff7455;
                }
              }
            }
          }
        }
      }
      .main-right {
        width: 424px;
        height: 892px;
        .title {
          width: 390px;
          height: 40px;
          background: url('../images/main-l-title.png') no-repeat;
          background-size: 100% 100%;
          padding-left: 48px;
          font-weight: 600;
          font-size: 24px;
          color: #fdffff;
          margin-bottom: 24px;
        }
        .top-panel {
          background: #002e4f;
          width: 424px;
          height: 189px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #0095a9;
          padding: 10px 20px;
          .main {
            display: flex;
            flex-wrap: wrap;
            height: 105px;
            overflow: auto;
            position: relative;
            .item {
              width: 178px;
              height: 77px;
              margin-left: 10px;
              margin-bottom: 10px;
              background: rgba(0, 222, 227, 0.08);
              border-radius: 4px 4px 4px 4px;
              display: flex;
              align-items: center;
              .item-left {
                width: 29px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                color: #00DEE3;
                font-weight: 500;
                font-size: 20px;
                writing-mode: vertical-rl;
                letter-spacing: 5px;
                background: rgba(0, 222, 227, 0.16);
              }
              .item-right {
                flex: 1;
                display: flex;
                .avatar {
                  width: 40px;
                  height: 40px;
                  background: #d9d9d9;
                  border-radius: 35px 35px 35px 35px;
                  margin: 0 8px;
                }
                .name {
                  font-size: 20px;
                  font-weight: 500;
                }
                .phone {
                  font-size: 14px;
                }
              }
            }
          }
        }
        .center-panel {
          background: #002e4f;
          width: 424px;
          height: 357px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #0095a9;
          margin: 12px 0;
          display: flex;
          flex-direction: column;
          padding: 10px 20px;
          position: relative;

          .more {
            position: absolute;
            right: 20px;
            top: 15px;
          }
          .main {
            display: flex;
            flex-wrap: wrap;
            overflow: auto;
            flex: 1;
            align-content: flex-start;
            .item {
              width: 178px;
              height: 77px;
              margin-left: 10px;
              margin-bottom: 10px;
              background: rgba(0, 222, 227, 0.08);
              border-radius: 4px 4px 4px 4px;
              display: flex;
              align-items: center;
              .item-left {
                width: 29px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                writing-mode: vertical-rl;
                color: #00DEE3;
                font-size: 14px;
                letter-spacing: 1px;
                background: rgba(0, 222, 227, 0.16);
              }
              .item-right {
                flex: 1;
                display: flex;
                .avatar {
                  width: 40px;
                  height: 40px;
                  background: #d9d9d9;
                  border-radius: 35px 35px 35px 35px;
                  margin: 0 8px;
                }
                .name {
                  font-size: 20px;
                  font-weight: 500;
                }
                .time {
                  font-size: 14px;
                  color: #E2E7F9;
                }
              }
            }

          }
        }
        .bottom-panel {
          background: #002e4f;
          width: 424px;
          height: 322px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #0095a9;
          display: flex;
          flex-direction: column;
          padding: 10px 20px;
          position: relative;

          .more {
            position: absolute;
            right: 20px;
            top: 15px;
          }
          .main {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
          }
        }
      }
    }
    .bottom-bg {
      position: absolute;
      bottom: 60px;
    }
  }
  .no-data-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .dataScreen-main-chart {
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
